<script>
	import initLevitatedSphere from '@/js_sdk/qjp-levitatedSphere/js_sdk/qjp-levitatedSphere.js';
	const options = {
		viewStyle: {
			width: 100,
			height: 100
		},
		moveSpeed: 100,
		url: '/static/logo.png',
		isMove: true
	}
	
	export default {
		globalData: {  
			sphere: null
		},
		data(){
			return {
				sphere: null
			}
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
			getApp().globalData.sphere = this.sphere
		},
		onHide: function() {
			console.log('App Hide')
		},
		created() {
			// #ifdef APP-PLUS
			this.sphere = initLevitatedSphere(options, this.clickHandler, false);
			// #endif
		},
		methods: {
			clickHandler(res) {
				if (res.type == 'click') {
					console.log('click', res);
					uni.showToast({
						title: '点击事件!'
					});
				}
				if (res.type == 'move') {

					console.log('move', res);
				}
			}
		}
	}
</script>

<style>
	.icon {
		width: 30rpx;
		height: 30rpx;
	}

	.floating-button {
		position: fixed;
		/* 固定位置 */
		right: 20px;
		/* 距离右侧20像素 */
		bottom: 80px;
		/* 距离底部80像素 */
		z-index: 999;
		/* 确保组件在最上层 */
	}
	.bottom {
	  padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS < 11.2 */
	  padding-bottom: env(safe-area-inset-bottom); /* 适用于iOS >= 11.2 */
	}
	 
	/* 针对安卓设备 */
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
	  .bottom {
	    padding-bottom: constant(safe-area-inset-bottom);
	    padding-bottom: env(safe-area-inset-bottom);
	  }
	}
</style>